<template>
<div>
  <div class="tabs card-shadow">
    <div class="tabs-head">
      <scroll-view
        class="scroll"
        scroll-x="true"
        :scroll-left="scrollLeft"
        scroll-with-animation
        >
        <ul class="flex-box">
          <li
            class="scroll-item"
            :class="{disabled: item.disabled, active: index === dateIndex }"
            v-for="(item, index) in tabs"
            :key="index"
            @tap="selectDate(index)">
            <p class="date font14 bold">{{item.date}}</p>
            <p class="tint">{{item.week}}</p>
            <p class="tint">{{item.text}}</p>
          </li>
        </ul>
      </scroll-view>
      <div class="all-date text-right">
        <i class="icon icon-calender"></i>
        <navigator :url="lookAllDateUrl" class="font14 vertical-middle">查看完整日历</navigator>
      </div>
    </div>
    <div class="tabs-cont">
      <div class="time-list">
        <p class="title font15 dark">上午</p>
        <ul class="clearfix text-center">
          <li
            class="font14 float-left"
            :class="{active: i === timeIndex}"
            v-for="(v,i) in timeArr"
            :key="i"
            v-if="i<8"
            @tap="selectTime(i)">{{v}}</li>
        </ul>
      </div>
      <div class="time-list">
        <p class="title font15 dark">下午</p>
        <ul class="clearfix text-center">
          <li
            class="font14 float-left"
            :class="{active: i === timeIndex}"
            v-for="(v,i) in timeArr"
            :key="i"
            v-if="i>8"
            @tap="selectTime(i)">{{v}}</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="btn-full-box">
    <view class="btn-full" @tap="sureSelect">确定</view>
  </div>
</div>

</template>
<script>
import dateUtil from '@/utils/dateUtil'
export default {
  data () {
    return {
      tabs: [],
      dateIndex: 1,
      timeArr: [
        '08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30',
        '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30',
        '16:00', '16:30', '17:00', '17:30', '18:00'
      ],
      timeIndex: 0
    }
  },
  computed: {
    lookAllDateUrl () {
      const value = this.tabs[this.dateIndex] && this.tabs[this.dateIndex].dateValue || ''
      return `/pages/selectDate/allDate/main?select=${encodeURIComponent(value)}`
    },
    scrollLeft () {
      if (this.dateIndex > 4) {
        return this.dateIndex * 46
      } else {
        return 0
      }
    }
  },
  methods: {
    createTabs (dateObj) {
      const nowDate = new Date()
      const nowDateStr = dateUtil.format(nowDate, 'yyyy-MM-dd')
      const tomDate = dateUtil.addDays(new Date(), 1)
      const tomDateStr = dateUtil.format(tomDate, 'yyyy-MM-dd')
      let selectDateStr = ''
      if (dateObj) {
        selectDateStr = dateUtil.format(dateObj, 'yyyy-MM-dd')
        dateObj = dateUtil.addDays(dateObj, -7)
        dateObj = dateObj.getTime() < nowDate.getTime() ? nowDate : dateObj
      } else {
        dateObj = nowDate
        selectDateStr = tomDateStr
      }

      const dateObjStr = dateUtil.format(dateObj, 'yyyy-MM-dd')
      this.tabs = Array.from({length: 15}).map((v, i) => {
        const date = dateUtil.addDays(new Date(dateObjStr.replace(/-/g, '/')), i)
        const dateStr = dateUtil.format(date, 'yyyy-MM-dd')
        const isToday = dateStr === nowDateStr
        const isTom = dateStr === tomDateStr
        let week = dateUtil.getDayName(date)
        if (isToday) {
          week = '今天'
        } else if (isTom) {
          week = '明天'
        }
        if (selectDateStr === dateStr) {
          this.dateIndex = i
        }
        return {
          date: dateUtil.format(date, 'MM/dd'),
          week,
          text: isToday ? '约满' : '',
          disabled: isToday,
          dateValue: dateStr
        }
      })
    },
    selectDate (i) {
      if (!this.tabs[i].disabled) {
        this.dateIndex = i
      }
    },
    selectTime (i) {
      this.timeIndex = i
    },
    sureSelect () {
      this.globalData.store.hourWorker = {
        time: this.timeArr[this.timeIndex],
        date: this.tabs[this.dateIndex].dateValue
      }

      this.navigateBack()
    }
  },
  onShow () {
    const selectTime = decodeURIComponent(this.$root.$mp.query.select || '')
    let hourWorker = this.globalData.store.hourWorker
    if (hourWorker && hourWorker.initialDate) {
      const index = this.tabs.findIndex(v => hourWorker.initialDate === v.dateValue)
      console.log(index)
      if (index > -1) {
        this.dateIndex = index
      } else {
        this.dateIndex = 0
        this.createTabs(new Date(hourWorker.initialDate.replace(/-/g, '/')))
      }
      this.globalData.store.hourWorker.initialDate = ''
    } else if (selectTime) {
      this.createTabs()
      const selectArr = selectTime.trim().split(' ')
      this.timeIndex = this.timeArr.indexOf(selectArr[1])
      const index = this.tabs.findIndex(v => selectArr[0] === v.dateValue)
      if (index > -1) {
        this.dateIndex = index
      } else {
        this.dateIndex = 0
        this.createTabs(new Date(selectArr[0].replace(/-/g, '/')))
      }
    } else {
      this.createTabs()
    }
  }
}
</script>
<style lang="less">
.tabs {
  padding: 40upx 28upx;
  margin: 0 28upx;
}
.tabs .tabs-head {
  text-align: center;
  background: url(./images/head-bg.png) top center/100% no-repeat;
  padding: 0 12upx 46upx;
  overflow: hidden;
}
.tabs .tabs-head .scroll {
  width: 750upx;
}
.tabs .tabs-head .scroll .scroll-item {
  float: left;
  padding-top: 28upx;
  padding-left: 10upx;
  padding-right: 10upx;
  border-top: 10upx solid transparent;
  margin: 0 16upx;
  height: 160upx;
  line-height: 32upx;
}
.tabs .tabs-head .scroll .scroll-item .date {
  padding-bottom: 6upx;
}
.tabs .tabs-head .scroll .scroll-item.disabled {
  color: #aaa !important;
}
.tabs .tabs-head .scroll .scroll-item.active {
  position: relative;
  border-color: #c29962;
  background: linear-gradient(#f8e7cf, #fff);
}
.tabs .tabs-head .scroll .scroll-item.active:after {
  content: "";
  display: block;
  width: 12upx;
  height: 12upx;
  background-color: #467fcd;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.tabs .tabs-head .all-date {
  margin-top: 40upx;
  color: #3186ff;
  padding-right: 30upx;
}
.tabs .tabs-head .all-date .icon {
  width: 30upx;
  height: 30upx;
  margin-right: 12upx;
}
.tabs .tabs-cont .time-list .title {
  line-height: 36upx;
  padding-bottom: 32upx;
  border-bottom: 2upx solid #eaeaea;
}
.tabs .tabs-cont .time-list ul {
  padding-bottom: 50upx;
  margin-left: -20upx;
}
.tabs .tabs-cont .time-list ul li {
  color: #3186ff;
  border: 2upx solid #3186ff;
  border-radius: 60upx;
  width: 22%;
  height: 64upx;
  line-height: 64upx;
  margin-top: 30upx;
  margin-left: 2%;
}
.tabs .tabs-cont .time-list ul li.active {
  background-color: #3186ff;
  color: #fff;
}
.btn-full-box {
  padding: 40upx 44upx 50upx;
}
</style>
